<template>
  <view>
    <u-navbar title="详情" autoBack fixed placeholder></u-navbar>
    <view class="content">
      <view class="detail">
        <u-form label-align="left" label-width="100px" :label-style="{color: '#999'}">
          <u-form-item label="流程编号：">
            <view style="display: inline;word-break: break-all;">{{ item.name }}</view>
          </u-form-item>
          <u-form-item label="请假类型：">
            <view>{{ item.type }}</view>
          </u-form-item>
          <u-form-item label="请假天数：">
            <view>{{ item.day }}天</view>
          </u-form-item>
          <u-form-item label="请假原因：">
            <view>{{ item.reason }}</view>
          </u-form-item>
          <u-form-item label="图片：">
            <u-image v-for="(img, index) in item.imgs" :key="index" :src="fileUrl + img" 
            width="calc((100vw - 100px) / 4)" height="calc((100vw - 100px) / 4)" @click="previewImg(index)"></u-image>
          </u-form-item>
        </u-form>
      </view>
      <view class="flow">
        <view class="panel_title">流程</view>
        <view class="panel_content">
          <u-steps :current="active" direction="column" active-color="#00a679" inactive-color="#999">
            <u-steps-item v-for="(item, index) in flows" :key="index" :title="item.name" :error="item.result == '0'">
              <view class="slot-desc" slot="desc">
                <view v-if="item.result && index != '0'">审批结果：{{ item.result }}</view>
                <view v-if="item.opinion">审批意见：{{ item.opinion }}</view>
                <view v-if="item.createTime">操作时间：{{ item.createTime }}</view>
              </view>
            </u-steps-item>
          </u-steps>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getLeaveDetail
} from '@/api/leave'
import {
  setFlow
} from '@/utils/flow'
export default {
  name: '',
  data() {
    return {
      id: '',
      active: 0,
      item: {},
      flows: []
    }
  },
  onLoad(options) {
    getLeaveDetail(options.id).then(res => {
      console.log(res.data);
      this.item = res.data
      this.$set(this.item, 'imgs', res.data.imgs ? JSON.parse(res.data.imgs) : [])
      this.active = res.data.approveList.length
      this.flows = setFlow(res.data.approveList, res.data.leaveType)
    })
  },
  methods: {
    previewImg(index) {
      const arr = this.item.imgs.map(img => {
        return this.fileUrl + img
      })
      uni.previewImage({
        current: index,
        urls: arr
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail {
    background-color: #ffffff;
    margin: 10px 0;
    padding: 10px;
  }

  .flow {
    padding: 10px 0;
    background-color: #ffffff;

    .panel_title {
      padding: 0 0 10px 10px;
      border-bottom: 1px dashed #eeeeee;
      font-size: 18px;
    }

    .panel_content {
      padding: 10px;
    }

    .slot-desc {
      min-height: 40px;
      color: #999;
      font-size: 10px;
      
      view {
        line-height: 20px;
      }
    }
  }
</style>